<template>
  <section class="rankings-music-container">
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="pageLoading"/>

    <!--专辑信息-->
    <div class="thumb-wrap">
      <p>
        <img :src="thumbObj.pic_s444" alt="" class="thumb-img">
      </p>
      <p class="thumb-comment" v-if="thumbObj.comment">{{thumbObj.comment}}</p>
    </div>

    <div class="music-wrap">
      <div class="music-list flex flex-align" v-for="(item,index) in rankingsList" :key="index">
        <p class="song-img">
          <img :src="item.pic_small" alt="">
        </p>
        <p class="text-overflow">
          <span class="song-name">{{item.title}}</span>
          <span class="line"> - </span>
          <span class="singer">{{item.author}}</span>
        </p>
      </div>
    </div>


  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import {Icon} from "vant";

  import auth from "@/common/auth";

  @Component({
    components: {
      [Icon.name]: Icon,
    }
  })
  export default class ChannelPage extends Vue {
    private pageLoading: boolean = true;

    // 音乐列表
    private rankingsList: object[] = [];

    // 专辑信息
    private thumbObj: object = {};


    mounted() {
      const type = this.$route.query.type;
      if (!type) {
        this.$route.go(-1);
        return;
      }

      // 设置专辑信息
      let musicRankings = this.$store.state.musicRankings;
      if (musicRankings.bg_pic) {
        this.thumbObj = musicRankings;
        auth.setMusicRankings(musicRankings);
      } else {
        this.thumbObj = auth.getMusicRankings();
      }

      this.getRankingsDetail(type);
    }

    // 音乐排行榜详情
    getRankingsDetail(type: string) {
      this.pageLoading = true;
      this.$api.get("/musicRankingsDetails", {type}, "baseUrl2")
        .then((res: any) => {
          if (res && res.length) {
            this.rankingsList = res;
          }
        })
        .catch((e: any) => {
          this.$toast(e.msg);
        })
        .finally(() => {
          this.pageLoading = false;
        });
    }

  }
</script>

<style lang="scss">
  .rankings-music-container {
    .thumb-wrap {
      .thumb-img {
        width: 100%;
      }
      .thumb-comment {
        padding: 10px 16px;
        line-height: 2;
        background-color: #f4f4f4;
        text-indent: 8px;
      }
    }

    .music-wrap {
      .music-list {
        padding: 10px 16px;
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
        .song-img {
          width: 40px;
          height: 40px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .song-name {
          color: #333;
          font-size: 13px;
          margin-left: 10px;
        }
        .line {
          padding: 0 5px;
        }
        .singer {
          color: #888;
          font-size: 12px;
        }
      }
    }

  }
</style>

